<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="gsw945" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <title>Phaser Demo With Parcel</title>
    <style type="text/css">
        * {
            font-size: 10px;
        }
        #input-form {
            padding: 0.5em;
            background-color: #931C22;
        }
        #input-form input {
            padding: 2px;
            font-size: 2em;
            width: 12em;
        }
    </style>
</head>
<body>
    <div id="game"></div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/phaser/3.52.0/phaser.min.js" type="text/javascript"></script>
    <script>

        const phaserConfig = {
            type: Phaser.AUTO,
            parent: "game",
            width: 800,
            height: 450,
            dom: {
                createContainer: true
            },
            scene: {
                init: initScene,
                preload: preloadScene,
                create: createScene,
                update: updateScene
            }
        };

        const game = new Phaser.Game(phaserConfig);

        var isClicking = false;
        var swipeDirection;
        var plane;

        function initScene() { }

        function preloadScene() {
            this.load.html("form", "/assets/doms/form.html");
        }

        function createScene() {

            this.nameInput = this.add.dom(10, 10).setOrigin(0, 0).createFromCache("form");

            this.message = this.add.text(24, 80, "Hello, --", {
                color: "#FFFFFF",
                fontSize: 30,
                fontStyle: "bold"
            }).setOrigin(0);

            this.returnKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.ENTER);

            this.returnKey.on("down", event => {
                let name = this.nameInput.getChildByName("name");
                if(name.value != "") {
                    this.message.setText(`Hello, ${name.value}!`);
                    name.value = "";
                }
            });

        }

        function updateScene() {

            //

        }

    </script>
</body>
</html>